<template>

    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <Search :model="searchForm" @search="getList" @reset="resetSearchForm">
            <SearchItem label="搜索">
                <el-input v-model="searchForm.search" placeholder="内容类型" clearable></el-input>
            </SearchItem>
        </Search>

        <!-- 新增|刷新 -->
        <ListHeader layout="create,refresh" @create="handleCreate" @refresh="getList" />

        <el-table :data="tableData" stripe style="width: 100%; text-align: center" v-loading="loading" border>
            <el-table-column type="index" label="序号" width="100" style="text-align: center" align="center " />
            <el-table-column prop="type" label="类型名称" width="300" style="text-align: center" align="center " />

            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row)" text type="primary" class="p-1">
                        <el-icon class="el-icon--left" :size="16">
                            <Edit />
                        </el-icon>修改
                    </el-button>

                    <el-popconfirm title="是否要删除该类型？" confirmButtonText="确认" cancelButtonText="取消"
                        @confirm="handleDelete(scope.row.id)">
                        <template #reference>
                            <el-button text type="danger" class="p-1">
                                <el-icon class="el-icon--left" :size="16">
                                    <Delete />
                                </el-icon>删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="pageSize" @current-change="getList" />
        </div>


        <!-- 新增/修改 -->
        <FormDrawer destroyOnClose ref="formDrawerRef" size="30%" :title="drawerTitle" @submit="handleSubmit">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="150px" :inline="false">
                <el-form-item label="类型名称" prop="type">
                    <el-input v-model="form.type" placeholder="类型名称"></el-input>
                </el-form-item>
            </el-form>
        </FormDrawer>
    </el-card>

</template>
<script setup>
// vue 内部方法
import { ref } from 'vue'

// 页面组件
import ListHeader from "~/components/ListHeader.vue"
import FormDrawer from "~/components/FormDrawer.vue"
import Search from "~/components/SearchForm.vue"
import SearchItem from "~/components/SearchItem.vue"

// 公共方法
import { useInitTable, useInitForm } from "~/composables/useCommon"


// api
import {
    getContentTypeList,
    postContentType,
    putContentType,
    deleteContentType,
} from "~/api/medias/content_type"


// 初始化表格
const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    currentPage,
    total,
    pageSize,
    getList,
    handleDelete,
} = useInitTable({
    searchForm: { search: "", id: "", type: "" },
    requestListAPI: getContentTypeList,
    delete: deleteContentType,
    // pageSize: store.state.pageSize.MessageList,
    pageSize: 10,
    onGetListSuccess: (res) => {
        tableData.value = res.data.results
        total.value = res.data.count
    },
})

// 初始化表单
const {
    formDrawerRef,
    formRef,
    form,
    rules,
    editId,
    drawerTitle,
    handleSubmit,
    resetForm,
    handleCreate,
    handleEdit,
} = useInitForm({
    getList,
    create: postContentType,
    update: putContentType,
    form: {
        type: "",
    },
    // onGetDataSuccess: (res) => {
    //   // 将接口返回的公司列表数据命名为companyAllList
    //   companyAllList.value = res.data.name;
    // },
    rules: {
        type: [
            {
                required: true,
                message: "类型不能为空",
                trigger: "blur",
            },
        ],
    }

})

</script>

<style scoped></style>